<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>扫雷</title>
	<style type="text/css">
		body {
			
			background-image:url("res/bg.jpg");
			
			padding:0px;
		}

		#wrapMain {
			background-color: " ";
		}
	
		#divRet{
			display:none;
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			text-align:center;
		}
		
		.contentDiv {
			display:table-cell;
			vertical-align:middle;
			font-size:40px;
			color:yellow;
		}
		.shadowDiv{
			position:absolute;
			width:100%; 
			height:100%; 
			text-align:center;
			color:white;
			font-size:50px;
			background-color:#002;
			opacity:0.6;filter:alpha(opacity=30); -moz-opacity:0.3;
			z-index:-1; 
		}
	
		.gezi { 
			width:40px;
			height:40px;
			background-image:url("res/first.png");
			border-right:1px solid white;
			border-bottom:1px solid white;
		}
		
		#menu {
			position:fixed;
			top:10%;
			right:0;
		
			text-align:center;
			padding:5px 5px;
			color:black;
		}
		.funBox {
			margin:10px 0;
			margin-top: 200;
			padding:5px;
			border:1px solid silver;
		}

		.restartBut{
			border:none;
			width:80px;
			height:80px;
		}
		
		#infoDiv {
			position:fixed;
			top:10%;
			left:-1px;
			font-size:15px;
		}
		.importantMsg{
			font-weight:bold;
			color:red;
			font-size:25px;
		}
	</style>
	<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
	<script type="text/javascript" src="res/BaseDefine.js"></script>
	<script type="text/javascript" src="res/AlgoUtils.js"></script>
	<script type="text/javascript" src="res/GameInfo.js"></script>
	<script type="text/javascript" src="res/colorConfig.js"></script>
	<script type="text/javascript" src="res/ValueControl.js"></script>
	<script type="text/javascript" src="res/AdapterUtils.js"></script>
	<script type="text/javascript" src="res/EnergyUiInfo.js"></script>
	<script type="text/javascript" src="res/cavasUtils.js"></script>
	<script type="text/javascript" src="res/AudioUtils.js"></script>
	
	<script type="text/javascript">
		// var vConsole = new VConsole();

		const AnimalOneStepDuringMs = 130; // merge动画走完一格的时长
		const FrameIntervalMs = 16;
		const FPS=Math.floor(AnimalOneStepDuringMs / FrameIntervalMs);
		function getOneFrameStep() {
			// 一帧动画，需要走的长度
			return getOneGeziStep() / FPS;
		}
		function getOneGeziStep() {
			return gGeziW + SPACING;
		}
		
		const EnumMoveInfoAlginFlag = {
			BEGIN: 1,	// 和整个动画的开始对齐。比如当前动画需要2格，而整个动画由4格，则当前动画会从整个动画第1步开始，第2步完成后结束
			END: 2,		// 和整个动画的尾部对齐。比如当前动画需要2格，而整个动画由4格，则当前动画则会从整个动画的第3步开始，第4步完成后结束
		}

		/**
		** passingGeziArr，途经的格子index列表，不包含终点和启动
		** alginFlag：参考EnumMoveInfoAlginFlag
		**/
		function MoveInfo(fromGezi, toIndex, passingIdxArr, alginFlag = EnumMoveInfoAlginFlag.END) {
			this.mFrom = fromGezi;
			this.mToId = toIndex;
			this.mAlginFlag = alginFlag;

			var toPos = getGeziPosByIndex(toIndex);
			this.mToX = toPos.x;
			this.mToY = toPos.y;

			// 记录途经得位置，包括终点，但不包括起点
			this.mPassingArr = new Array();

			if (passingIdxArr != null && passingIdxArr.length >= 0) {
				// 指定了路过的路径
				for (var i=0; i<passingIdxArr.length; i++) {
					var idx = passingIdxArr[i];
					var gezi = arrGezi[idx];
					this.mPassingArr.push(new Pos(gezi.x, gezi.y));
				}
				this.mPassingArr.push(new Pos(this.mToX, this.mToY));
			} else {
				// 没有指定路径，先走x，再走y
				// this.mStepCount = (Math.abs(to.y - from.y) + Math.abs(to.x - to.y)) / getOneGeziStep();
				var tmpX = fromGezi.x, tmpY=fromGezi.y;
				var oneStepDistance = getOneGeziStep() * (this.mToX > fromGezi.x ? 1 : -1);
				while(tmpX != this.mToX) {
					tmpX += oneStepDistance;
					this.mPassingArr.push(new Pos(tmpX, tmpY));
				}
				oneStepDistance = getOneGeziStep() * (this.mToY > fromGezi.y ? 1 : -1)
				// console.log("begin find my");
				while(tmpY != this.mToY) {
					tmpY += oneStepDistance;
					this.mPassingArr.push(new Pos(tmpX, tmpY));
					// console.log("tmpY=" + tmpY + ", this.mToY=" + this.mToY);
				}
			}

			this.getStepCount = function() {
				return this.mPassingArr.length;
			}

			/*
			** nowStep: [1, maxStep]
			*/
			this.nextFrame = function(nowStep, maxStep, offsetOfNowStep) {
				var step = nowStep;
				if (this.mAlginFlag == EnumMoveInfoAlginFlag.END) {
					step = nowStep - (maxStep - this.mPassingArr.length);
				}
				if (step < 1) {
					// 还没有到我，将位置设置成起始值
					return;
				}
				if (step > this.mPassingArr.length) {
					// 我已经结束了，将位置设置成 目标位置
					this.mFrom.setTrascationPos(this.mToX, this.mToY);
					return;
				}
				var index = step - 1;
				var startPos = null;
				if (index <= 0) {
					startPos = new Pos(this.mFrom.x, this.mFrom.y);
				} else {
					startPos = this.mPassingArr[index-1];
				}
				var targetPos = this.mPassingArr[index];

				var tx = startPos.x, ty = startPos.y;
				if (startPos.x != targetPos.x) {
					tx += Math.floor((targetPos.x > startPos.x ? 1 : -1) * offsetOfNowStep);
				}
				if (startPos.y != targetPos.y) {
					ty += Math.floor((targetPos.y > startPos.y ? 1 : -1) * offsetOfNowStep);
				}
				this.mFrom.setTrascationPos(tx, ty);
			}

			this.endMove = function() {
				this.mFrom.clearTrascationPos();
			}
		}

		MoveInfo.obtain = function(from, to ,passingArr) {
			return;
		}

		var gAnimalController;
		function AnimailController(onEndCallback) {
			this.mOnEndCallback = onEndCallback;
			this.oneFrameStep = getOneFrameStep();
			this.oneStepDistance = getOneGeziStep();
			this.moveInfoArr = null
			this.mStepCount = 0;
			this.mNowFrameNum = 0;
			this.startAnimal = function(moveInfoArr) {
				this.moveInfoArr = moveInfoArr;

				// 计算maxStep
				for (var i=0; i<this.moveInfoArr.length; i++) {
					var info = this.moveInfoArr[i];
					var c = info.getStepCount();
					if (c > this.mStepCount) {
						this.mStepCount = c;
					}
				}

				this.__schduleFrame();
				console.log("AnimailController startAnimal(): mStepCount=" + this.mStepCount);
			}

			this.__schduleFrame = function() {
				var controller = this;
				setTimeout(function() {
					controller.onInterval();
				},FrameIntervalMs);
			}

			this.onInterval = function() {
				this.mNowFrameNum ++;
				if (this.mNowFrameNum >= FPS * this.mStepCount) {
					console.log("AnimailController endAnimal()");
					for (var i=0; i<this.moveInfoArr.length; i++) {
						// 结束移动
						var info = this.moveInfoArr[i];
						info.endMove();
					}
					// 动画结束
					if (this.mOnEndCallback != null) {
						this.mOnEndCallback(this.moveInfoArr);
					}
					return;
				}
				var offset = this.oneFrameStep * (this.mNowFrameNum % FPS);
				var step = Math.floor(this.mNowFrameNum/FPS) + 1;

				for (var i=0; i<this.moveInfoArr.length; i++) {
					var info = this.moveInfoArr[i];
					info.nextFrame(step, this.mStepCount, offset);
				}
				this.__schduleFrame();
				// 重新绘制
				doDraw();
			}
		}

		function FlowDownAnimal(onEndCallback) {
			this.mController = new AnimailController(onEndCallback);
			this.startAnimal = function() {
				var moveInfoArr = new Array();
				for(var l=0; l<LIE; l++) {
					// step1：统计出本列，需要补充多少个
					var missCount = 0;
					for (var h=HANG-1; h>=0; h--) {
						var gezi = arrGezi[h*LIE + l];
						if (gezi == null) {
							missCount++;
						}
					}
					// step2: 将格子往下掉
					for (var h=HANG-1; h>=0; h--) {
						var gezi = arrGezi[h*LIE + l];
						if (gezi != null) {
							var targetIdx = null;
							
							for (var tmp=HANG-1; tmp>h; tmp--) {
								// 从这一列的下面开始找空的格子
								var idx = tmp*LIE + l;
								if (arrGezi[idx] == null) {
									targetIdx = idx;
									break;
								}
							}

							if (targetIdx == null) {
								// 不需要flow down
							} else {
								// 需要flow down
								arrGezi[gezi.index] = null;  // 将格子原来的位置空出来
								gezi.index = targetIdx;
								arrGezi[targetIdx] = gezi;
								moveInfoArr.push(new MoveInfo(gezi, targetIdx, alginFlag=EnumMoveInfoAlginFlag.BEGIN));
							}
						}
					}
					// step3: 这一列补充缺失的格子
					var tmp=1
					var pos = getGeziPosByIndex(l);
					for (var i=missCount-1; i>=0; i--) {
						var targetIdx = i*LIE + l;

						var gezi = GeZi.obtain();
						gezi.value = gValueControl.getNewRandomValue();
						gezi.y = pos.y - (SPACING + gezi.height)*tmp++;
						gezi.x = pos.x;
						gezi.index = targetIdx;
						arrGezi[targetIdx] = gezi;
						moveInfoArr.push(new MoveInfo(gezi, targetIdx));
					}
				}

				this.mController.startAnimal(moveInfoArr);
			}
		}

		var gAnimalRunning = false;
		function MergeAnimal(indxArr, onEndCallback) {
			this.mIdxArr = indxArr;
			this.mController = new AnimailController(onEndCallback);
			this.startAnimal = function() {
				var moveInfoArr = new Array();

				var targetGezi = arrGezi[this.mIdxArr[0]];
				console.log("MergeAnimal() startAnimal() targetIdx=" + targetGezi.index);

				for (var i=1; i<this.mIdxArr.length; i++) {
					var idx = this.mIdxArr[i];
					var pathArr = arrGezi[idx].__findWay2Geizi(targetGezi.index, this.mIdxArr);
					// console.log("MergeAnimal() idx=" + this.mIdxArr[i] + ", pathArr=" + pathArr);
					moveInfoArr.push(new MoveInfo(arrGezi[idx], targetGezi.index, pathArr));
				}
				this.mController.startAnimal(moveInfoArr);
			}
		}

		var gGeziId = 0;
		function GeZi() {
			this.id = gGeziId++;
			this.index = 0;
			this.width = 0;
			this.height = 0;
			this.x = 0;
			this.y = 0;
			this.value = 1;
			this.bgColor = 0xfff;
			this.textColor = 0x000;

			this.mSurrund = new Array(4);

			this.tracationX = null;
			this.tracationY = null;

			this.getX = function() {
				if (this.tracationX == null) {
					return this.x;
				} else {
					return this.tracationX;
				}
			}

			this.getY = function() {
				if (this.tracationY == null) {
					return this.y;
				} else {
					return this.tracationY;
				}
			}

			this.handleClickEvent = function(clickX, clickY) {
				if (clickX >= this.x && clickX <= this.x + this.width &&
					clickY >= this.y && clickY <= this.y + this.height) {
					// console.log("clickMe");
					return true;
				}
				return false;
			}

			/*
			** 从findList中找到targetIdx的路径
			*/
			this.__findWay2Geizi = function(targetIdx, findList = []) {
				var pathIdxArr =  gAlgoUtils.findShortestPath(HANG, LIE, this.index, targetIdx, findList);
				pathIdxArr.pop();  	// 删除最后一个元素，这是targeIdx
				pathIdxArr.shift(); // 删除第一个元素，这是this.index
				return pathIdxArr;
			}

			/*
			** 查找周边value匹配的格子
			** exceptIdx: 不查找的格子index列表
			*/
			this.__findSurrundByValue = function(value = null, exceptIdxArr = null) {
				var retIdxArr = new Array();
				retIdxArr.push(this.index);

				var findGeZiArr = [];
				findGeZiArr.push(this);
				while(findGeZiArr.length > 0) {
					var tmpGeiAr = [];
					for (var i =0; i<findGeZiArr.length; i++) {
						var gezi = findGeZiArr[i];
						for (var j=0; j<gezi.mSurrund.length; j++) {
							var sur = gezi.getSurrund(j);
							if (sur != null && sur.value == this.value && retIdxArr.indexOf(sur.index) < 0) {
								retIdxArr.push(sur.index);
								tmpGeiAr.push(sur);
							}
						}
					}
					findGeZiArr = tmpGeiAr;
				}

				/*
				retIdxArr.sort(function(a, b) {
					return a - b;
				});
				*/

				return retIdxArr;
			}

			this.tryMerge = function() {
				var indxArr = this.__findSurrundByValue();
				// console.log(this.index + " tryMerge(): sameCount=" + indxArr.length);

				if (indxArr.length >= 3) {
					// console.log(this.index + " tryMerge(): indxArr=" + indxArr);
					gAudioUtils.playMergeMusic(gMergeCombo);

					// 增加分数
					console.log("gMergeCombo=" + gMergeCombo);
					gGameInfo.addScore(gMergeCombo * this.value * indxArr.length);

					gAnimalRunning = true;
					// need merge
					var nowGezi = this;
					const mergeAnimal = new MergeAnimal(indxArr, function(moveInfoArr) {
						gGameInfo.addEnergy();
						// merge animal end
						for (var i=0; i<moveInfoArr.length; i++) {
							GeZi.free(moveInfoArr[i].mFrom);
						}
						{
							nowGezi.value ++;
							gGameInfo.updateNowMaxValue(nowGezi.value);
						}

						var flowDownAnimal = new FlowDownAnimal(function(moveInfoArr2) {
							// flowDown animal end
							for (var i=0; i<moveInfoArr2.length; i++) {
								var moveInfo = moveInfoArr2[i];
								moveInfo.mFrom.x = moveInfo.mToX;
								moveInfo.mFrom.y = moveInfo.mToY;
							}
							updateGeziIdAndSurrund();
							doDraw();
							gAnimalRunning = false;
							gGameInfo.persisent2disk(arrGezi);

							setTimeout("mergeCheck();", 1);
						});
						flowDownAnimal.startAnimal();
					});
					mergeAnimal.startAnimal();
					return true;
				}
				return false;
			}

			this.getSurrund = function(surrendIndex) {
				var idx = this.mSurrund[surrendIndex];
				if (idx != null) {
					return arrGezi[idx];
				}
			}

			this.clearTrascationPos = function() {
				this.tracationX = this.tracationY = null;
			}

			this.setTrascationPos = function(tx, ty) {
				this.tracationX = tx;
				this.tracationY = ty;
			}

			// 平移
			this.doTrascation = function(targetX, targetY, percent) {
				// console.log("doTrascation() id=" + this.index);
				this.tracationX = Math.floor(this.x + (targetX-this.x)*percent);
				this.tracationY = Math.floor(this.y + (targetY-this.y)*percent);
			}
			this.endTrascation = function() {
				// console.log("endTrascation() id=" + this.index);
				this.tracationX = null;
				this.tracationY = null;
			}

			this.mInUse = false;
		}


		const HANG=5, LIE=5;	// 格子行和列个数
		var SPACING = 10;  	// 格子之间的间距
		var gGeziPool = new Array(LIE*HANG*2);
		var gGeziPoolIndex = 0;
		GeZi.obtain = function(value) {
			var ret;
			while (true) {
				ret = gGeziPool[gGeziPoolIndex];
				if (ret == null) {
					gGeziPool[gGeziPoolIndex] = new GeZi();
					ret = gGeziPool[gGeziPoolIndex];
				}
				gGeziPoolIndex ++;
				if (!ret.mInUse) {
					break;
				}
			}
			ret.width = gGeziW;
			ret.height = gGeziH;
			ret.mInUse = true;
			if (value != null) {
				ret.value = value;
			}
			return ret;
		}

		GeZi.free = function(gezi) {
			if (gezi != null) {
				gezi.mInUse = false;
				if (gezi.index >= 0 && gezi.index < arrGezi.length) {
					arrGezi[gezi.index] = null;
				}
			}
		}
		
		/*设置右键浏览器默认上下文菜单不显示*/
		document.oncontextmenu=function()
		{
			return false;
		}
		
		var canvasEle;
		var canvasEnergy;
		var canvasGameInfo;
		var arrGezi;
		var arrGeziPos;
		var gGameInfo = new GameInfo();
		GameInfoUi.preload(gGameInfo);
		const VALUE_RANGE = 15

		var gEnergyUiInfo;
		var gGameInfoUi;
		var gValueControl = new ValueControl(gGameInfo);
		// 更新当前最大的value

		function onGeiClick(idx) {
			gGameInfo.leftEnergy --;
			{
				arrGezi[idx].value += 1;
				gGameInfo.updateNowMaxValue(arrGezi[idx].value);
			}
			if (!mergeCheck(arrGezi[idx]) && gGameInfo.isOver()) {
				// failed
				// alert("You lose");
				showRetPanel("Game Over");
			}
			doDraw();
		}

		//初始化
		var gGeziW, gGeziH;
		var gPersistGeziData = null;
		
		function init() {
			canvasEle = document.getElementById("main");
			canvasEnergy = document.getElementById("energy");
			canvasGameInfo = document.getElementById("gameInfo");
			
			function handlePointer(clientX, clientY) {
				if (gAnimalRunning) {
					return;
				}
				var rect = canvasEle.getBoundingClientRect();
				var x = clientX - rect.left;
				var y = clientY - rect.top;

				for(var i=0; i<arrGezi.length; i++) {
					if (arrGezi[i].handleClickEvent(x, y)) {
						onGeiClick(i);
						break;
					}
				}
			}
			if (gAdapterUtils.isPhone()) {
				// touch事件
				canvasEle.addEventListener("touchstart", function(event) {
					event.preventDefault();

					var touch = event.touches[0];
					var x = touch.clientX;
					var y = touch.clientY;

					handlePointer(x, y);
				});
			} else {
				// 鼠标点击事件
				canvasEle.addEventListener("click", function(event) {
					handlePointer(event.clientX, event.clientY);
		
					// 输出点击位置的坐标
					// console.log("点击位置的坐标：(" + x + ", " + y + ")");
				});
			}
		}

		function reStart(isFirstInit) {
			if (isFirstInit != null && isFirstInit) {
				init();

				// load from disk
				gPersistGeziData = gGameInfo.loadFromDisk();

				showRetPanel("Start Game Now");
				return;
			} else {
				gGameInfo.clearPersistendData();
			}
			closeRetPanel();
			
			// canvasEnergy.height = canvasEnergy.width;
			var maxWidth;

			var gameInfoCanvasHeight = 350;
			if (gAdapterUtils.isPhone()) {
				// phone
				maxWidth = 4096;
				gameInfoCanvasHeight = 420;
			} else {
				// pc
				maxWidth = 600;
			}
			gAdapterUtils.setSizeBase(600, Math.min(maxWidth, gAdapterUtils.getWindowSize().w));
			{
				SPACING = gAdapterUtils.getSize(10);
			}

			// 动态计算宽度和高度
			{
				canvasEle.height = canvasEle.width = Math.min(maxWidth, gAdapterUtils.getWindowSize().w) - gAdapterUtils.getSize(40);
				canvasEnergy.width = canvasEle.width;
				canvasEnergy.height = gAdapterUtils.getSize(35);

				var spaceDiv = document.getElementById("space");
				spaceDiv.width = canvasEle.width;
				spaceDiv.height = gAdapterUtils.getSize(40);

				canvasGameInfo.width = canvasEle.width;
				canvasGameInfo.height = gAdapterUtils.getSize(gameInfoCanvasHeight);
			}
			gEnergyUiInfo = new EnergyUiInfo(gAdapterUtils, canvasEnergy.width, canvasEnergy.height, gGameInfo.maxEnergyNum);
			gGameInfoUi = new GameInfoUi(gAdapterUtils, canvasGameInfo.width, canvasGameInfo.height);

			// 重置一些变量
			{
				if (gPersistGeziData == null) {
					gGameInfo.reset();
				}
				gValueControl.reset();
			}

			arrGezi = new Array(HANG*LIE);
			arrGeziPos = new Array(arrGezi.length);

			// 计算格子大小
			gGeziW = gGeziH = Math.floor((canvasEle.width - (LIE + 1) * SPACING) / LIE);
			// gGeziH = (canvasEle.height - (HANG + 1) * SPACING) / HANG;

			// 生成格子
			for(var i=0; i<arrGezi.length; i++) {
				// 先释放之前的格子
				GeZi.free(arrGezi[i]);

				arrGezi[i] = GeZi.obtain();
				arrGezi[i].width = gGeziW;
				arrGezi[i].height = gGeziH;

				if (gPersistGeziData != null) {
					arrGezi[i].value = gPersistGeziData[i];
				} else {
					arrGezi[i].value = gValueControl.getNewRandomValue(3);
				}

				var l=i % LIE;
				var h=Math.floor(i / HANG);
				
				arrGeziPos[i] = new Pos(l*gGeziW + (l+1)*SPACING, h*gGeziH + (h+1)*SPACING);

				arrGezi[i].x = arrGeziPos[i].x;
				arrGezi[i].y = arrGeziPos[i].y;
			}
			gPersistGeziData = null;

			updateGeziIdAndSurrund();

			doDraw();
			mergeCheck();
		}


		function getGeziPosByIndex(id) {
			return arrGeziPos[id];
		}

		function updateGeziIdAndSurrund() {
			// 查找并记录每个格子周围
			for(var i=0; i<arrGezi.length; i++) {
				var gezi = arrGezi[i];
				gezi.index = i;
				var l=i % LIE;
				var h=Math.floor(i / HANG);

				for (var j=0; j<gezi.mSurrund.length; j++) {
					gezi.mSurrund[j] = null;
				}

				if (l - 1 >= 0) {
					// left
					gezi.mSurrund[0] = i-1;
				}
				if (l + 1 < LIE) {
					// right
					gezi.mSurrund[1] = i+1;
				}
				if (h - 1 >= 0) {
					// up
					gezi.mSurrund[2] = i-LIE;
				}
				if (h + 1 < HANG) {
					// down
					gezi.mSurrund[3] = i+LIE;
				}
			}
		}

		// 检查是否有可以merge的格子
		gMergeCombo = 1;
		function mergeCheck(clickedGezi) {
			var merged = false;
			if (clickedGezi != null) {
				// 点击了某个格子，直接检测该格子周围，是否可以merge了
				merged = clickedGezi.tryMerge(true);
			} else {
				for(var i=0; i<arrGezi.length; i++) {
					var gezi = arrGezi[i];
					if (gezi.tryMerge()) {
						// 找到要merge的格子了，直接break
						// 格子merge完成后，会再次执行这个函数
						merged = true;
						break;
					}
				}
			}
			if (merged) {
				gMergeCombo ++;
			} else {
				gMergeCombo = 1;
				gGameInfo.persisent2disk(arrGezi);
			}
			return merged;
		}

		function doDraw() {
			// console.log("doDraw()");
			var ctx = canvasEle.getContext("2d");
			ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);

			var cornerRadius = Math.floor(arrGezi[0].width / 10);

			// 设置背景色
			ctx.fillStyle = "#bbada0";
			cavansDrawRoundedRect(ctx, 0, 0, canvasEle.width, canvasEle.height, gEnergyUiInfo.cornerRadius);

			// 绘制格子
			var geziUi = null;
			for(var i=0; i<arrGezi.length; i++) {
				var gezi = arrGezi[i];
				if (gezi == null) {
					continue;
				}
				var x = gezi.getX();
				var y = gezi.getY();
				var value = gezi.value;
				if (i == 0) {
					// console.log("i=" + i + ", (" + x, "," + y + "), value=" + value);
				}

				if (geziUi == null) {
					geziUi = new GeziUi(gezi.width, gezi.height, gAdapterUtils.getSize(40));
				}

				geziUi.draw(ctx, x, y, gezi.value);
			}

			// 绘制gameInfo
			ctx = canvasGameInfo.getContext("2d");
			gGameInfoUi.draw(ctx);

			// 绘制能量条
			// 1. draw engery shell
			ctx = canvasEnergy.getContext("2d");
			var cornerRadius = gEnergyUiInfo.cornerRadius;
			var x = gEnergyUiInfo.x;
			var y = gEnergyUiInfo.y;
			ctx.fillStyle = "#666666";

			cavansDrawRoundedRect(ctx, x, y, gEnergyUiInfo.w, gEnergyUiInfo.h, gEnergyUiInfo.cornerRadius);

			// 2. draw engery
			ctx.fillStyle = "#FFFF66";
			for (var i=1; i<=gGameInfo.maxEnergyNum; i++) {
				if (i <= gGameInfo.leftEnergy) {
					// 有能量
					if (gGameInfo.leftEnergy == gGameInfo.maxEnergyNum) {
						ctx.fillStyle = "#18cf0e"
					} else if (gGameInfo.leftEnergy <= 2) {
						ctx.fillStyle = "#ff0000"
					} else {
						ctx.fillStyle = "#fffb0f"
					}
				} else {
					// 空能量
					ctx.fillStyle = "#bbada0"
				}
				var rect = gEnergyUiInfo.getEnergyRect(i);
				cavansDrawRoundedRect(ctx, rect.x, rect.y, rect.w, rect.h, gEnergyUiInfo.cornerRadius);
			}
		}

		//显示结果面板
		function showRetPanel(retStr) {
			document.getElementById("divRet").style.display="table";
			document.getElementById("textRet").innerText=retStr;
		}
		//关闭结果面板
		function closeRetPanel() {
			document.getElementById("divRet").style.display="none";
		}

	</script>
</head>

<body onload="reStart(true);">
	<!--游戏界面-->
	<div id="wrapMain" style="width: calc(100% - 40px); padding: 0 20px; display: flex; flex-direction: column; align-items: center;">
		<canvas id="gameInfo"></canvas>
		<canvas id="energy"></canvas>
		<canvas id="space"></canvas>
		<canvas id="main"></canvas>
	  </div>
	
	<!--显示结果的div-->
	<div id="divRet" >
		<div class="shadowDiv">Tips</div>
		<div class="contentDiv">
			<span id="textRet"></span><br/>
			<span style="height: 200px"></span>
			<img class="restartBut" src="res/restart.png" onclick="reStart();"/>
		</div>
	</div>
	
</body>
</html>
